<template>
    <div class="addCart-box" >
        <div class="addCart-container">
            <svg t="1570194408045" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1094" width="200" height="200">
                <path d="M512 981.333333C252.8 981.333333 42.666667 771.2 42.666667 512S252.8 42.666667 512 42.666667s469.333333 210.133333 469.333333 469.333333-210.133333 469.333333-469.333333 469.333333z m-50.432-326.101333L310.613333 504.32a32 32 0 0 0-45.226666 45.226667l174.72 174.762666a32.341333 32.341333 0 0 0 0.341333 0.341334l0.256 0.213333a32 32 0 0 0 50.048-6.144l337.450667-379.605333a32 32 0 1 0-47.872-42.496l-318.762667 358.613333z" fill="#52C41A" p-id="1095"></path>
            </svg>
            <p>{{msg}}</p>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            msg:""
        }
    },
    methods: {
        closeTip() {
            document.body.removeChild(this.$el);
            this.$destroy();
        }
    },
    mounted() {
        document.body.appendChild(this.$el);
        setTimeout(() => {
            this.closeTip();
        }, 1500);
    }
};
</script>
<style lang="less" scoped>
.addCart-box {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.2);
    > .addCart-container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 3rem;
        height: 3rem;
        background-color: @gray;
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: center;
        > svg {
            width: 1.2rem;
            height: 1.2rem;
            padding-top: 0.2rem;
        }
        > p {
            padding-bottom: 0.3rem;
            color: @white;
            font-size: 0.35rem;
        }
    }
}
</style>